<template>
	<view id="wrap">
		<!-- <c-scroll-list ref="list" :api="getList" :apiParams="apiParams" :option="option" @load="(res)=>(list=res)">

		</c-scroll-list> -->
		<c-navBar title="选择优惠券" isSeat></c-navBar>

		<!-- 替换 list.list -->
		<view class="content">
			<!-- <c-scroll-list ref="list" :api="api" :option="option" :apiParams="apiParams" @load="load"> -->
			<view v-if="CouponList.length>0" class="item" v-for="(item,i) in CouponList" :key="i"
				:class="item.isExpire==false?'':'item-active'">
				<template v-if="item">
					<view class="">
						<image class="item-bg" v-if="item.support==1" :src="require('../static/coupon-icon.png')"
							mode="">
						</image>
						<image class="item-bg" v-else :src="require('../static/coupon-icon1.png')" mode=""></image>
					</view>
					<view class="item-c dis_sb">
						<view class="item-c-l">
							<view class="price" v-if="item.money">
								<text style="font-size: 32rpx;">￥</text>{{item.money / 100}}
							</view>
							<view class="newCoupon">
								{{item.couponType==1?"普通券 ":item.couponType==2?"新人券":''}}
							</view>
							<view class="pCoupon">
								{{item.type==1?"满"+item.meetAmount+'减'+item.deduction:item.type==2?"打"+item.discounts / 10+"折":item.type==3?"抵扣"+item.deduction:''}}
							</view>
							<view style="width: 150rpx;">

							</view>
						</view>
						<view class="item-c-r dis_sb">
							<view class="item-c-r-l">
								<view class="name" style="color: #333333;">
									{{item.couponName}}
								</view>
								<view class="">
									有效期:{{item.endTime?item.endTime.substring(0,11):''}}
								</view>
								<view class="df aic" @click="explainBtn(item.remarks)">
									使用说明 <image src="@/static/common/go2.png" mode=""></image>
								</view>
							</view>
							<view class="" v-if="item.support==1">
								<view class="item-c-r-btn" @click="immediateUse(item.couponUserId)">
									立即使用
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<!-- </c-scroll-list> -->
			<view class="emptyIcon" v-if="CouponList.length==0 && couponListSto.length==0">
				<image style="width: 300rpx;" src="../../../static/empty/icon2.png" mode="widthFix"></image>
				<text>暂无可使用优惠券</text>
			</view>
		</view>
		<c-tipsPop :show="show" title="使用说明" :text="description" @close="show=false" @confirm="show=false"></c-tipsPop>
		<c-imgTipsPop :show="receiveShow" :img="popImg" text='快去下单吧!' title='领取成功' @close="closeReceive"></c-imgTipsPop>
		<!-- <rich-text :nodes="notice_cont"></rich-text> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navNum: 1, //切换优惠券
				apiParams: { //这是接口参数
					// userId: uni.getStorageSync('user').id
					spuId: ''
				},
				api: this.$api.chooseCouponY,
				option: { //这是配置信息
					// auto: false
				},
				CouponList: [],
				show: false,
				show1: false, //领取成功参数
				popImg: require('../static/gous.png'),
				description: 'qqqqqqqqqqqqqq',
				scrollList: [{
						status: 1,
						amount: 20,
						name: '优惠券名称',
						endTime: '2023/11/17',
						description: '未使用'
					},
					{
						status: 2,
						amount: '新人券',
						name: '优惠券名称',
						endTime: '2023/11/17',
						description: '已使用'
					}
				],
				list: [],
				receiveShow: false,
				opt: {
					type: 0
				},
				couponListSto: []
			};

		},
		onShow() {
			// this.$refs.list.initList(true)
		},
		onLoad(e) {
			this.opt = e
			this.apiParams.skuId = e.skuId
			console.log(e, '商品id');
			this.getCouponList()


		},
		methods: {
			// 获取优惠券
			async getCoupons(skuId, quantity, type, skuIds) {
				let couArr = []
				if (type == 2) {
					await this.$api.chooseCouponsY({
						skuIds: skuIds ? JSON.parse(skuIds) : ''
					}).then(res => {
						couArr = res.data
					})
				} else if (type == 1) {
					await this.$api.chooseCouponY({
						skuId,
						quantity,
					}).then(res => {
						couArr = res.data
					})
				} else if (type == 3) {
					await this.$api.chooseCouponY({
						skuId,
						quantity,
						type: 2
					}).then(res => {
						couArr = res.data
					})
				}


				let indexs = []
				couArr.forEach((item, index) => {
					this.couponListSto.forEach(itx => {
						if (item.couponUserId == itx.couponId) {
							indexs.push(index)
						}
					})
				})
				console.log(indexs, 'indexs');
				indexs.forEach(item => {
					couArr[item] = ''
				})
				console.log(couArr, 'couArr');
				this.CouponList = couArr

			},

			explainBtn(description) {
				this.description = description ? description : '暂无~'
				this.show = true
			},
			//领券中心
			// load(res) {
			// 	this.CouponList = res.list
			// 	console.log('列表数据', res);
			// },
			// 获取已选择
			getCouponList() {
				let couponList = uni.getStorageSync('couponList')
				if (couponList) {
					this.couponListSto = JSON.parse(couponList)
				}

				this.getCoupons(this.opt.skuId, this.opt.quantity, this.opt.type, this.opt.skuIds)
			},

			// 立即使用
			immediateUse(id) {
				if (this.opt.type == 3) {
					let obj = {
						couponId: id,
						skuId: this.opt.skuId
					}
					// console.log(this.couponListSto, 'this.couponList');
					let i = this.couponListSto.findIndex(item => item.skuId == this.opt.skuId)
					// console.log(i, '下标');
					if (i != -1) {
						this.couponListSto[i].couponId = id
					} else {
						this.couponListSto.push(obj)
					}
					uni.setStorageSync('couponList', JSON.stringify(this.couponListSto))
					uni.navigateBack()
				} else {
					uni.setStorageSync('couponId', id)
					uni.navigateBack()
				}


			},
			// 优惠券使用说明
			getCouponDescription() {
				this.$api.getAgreement({
					id: 5
				}).then(res => {
					// console.log(res, "12345");
					this.description = res.data.content.substring(3, res.data.content.length - 4);
					// console.log(this.description,"121212");

				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.emptyIcon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		text {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
	}

	.nav {
		height: 100rpx;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;



		.nav_item {
			width: 25%;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
			text-align: center;
		}

		.nav_item_active {
			width: 25%;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #1A1A1A;
			text-align: center;
			border-radius: 6rpx 6rpx 6rpx 6rpx;


		}

		.nav-text {
			padding-bottom: 16rpx;
			box-sizing: border-box;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			border-bottom: 6rpx solid #FF6E4D;
		}

		.cut {
			height: 24rpx;
			border-right: 1rpx solid #B3B3B3;
		}
	}

	view {
		box-sizing: border-box;
	}

	.newCoupon {
		font-size: 48rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.pCoupon {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		// margin-left: 10rpx;
		text-align: center;
	}

	.content {
		margin-top: 20rpx;
		width: 750rpx;
		height: calc(100vh - 200rpx);
		overflow-y: scroll;
	}

	#wrap {
		min-height: 100vh;
		background-color: #F7F7F7;
		width: 750rpx;
		padding-top: 150rpx;
		box-sizing: border-box;

		.item {
			position: relative;
			margin-bottom: 20rpx;
			padding: 0rpx 20rpx;
			box-sizing: border-box;


			.item-bg {
				width: 100%;
				height: 160rpx;
			}

			.item-c {
				width: 710rpx;
				height: 160rpx;
				position: absolute;
				top: 0;
				z-index: 9;
				padding-top: 16rpx;
				padding-bottom: 16rpx;
				padding-left: 22rpx;
				padding-right: 10rpx;
				box-sizing: border-box;

				.item-c-l {
					color: #FFFFFF;
					font-size: 20rpx;
					font-weight: 500;
					// width: 140rpx;

					.price {
						font-size: 32rpx;
						font-size: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 800;
						color: #FFFFFF;
						// margin-left: 15rpx;
						text-align: center;

						text {
							font-size: 80rpx;
						}
					}
				}

				.item-c-r {
					flex: 1;
					margin-left: 54rpx;
					height: 100%;

					.item-c-r-l {
						height: 100%;
						color: #787980;
						font-size: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						image {
							width: 16rpx;
							height: 16rpx;
							margin-left: 10rpx;
						}
					}

					.item-c-r-btn {
						width: 120rpx;
						height: 48rpx;
						line-height: 48rpx;
						text-align: center;
						// background: $c-bgColor;

						border-radius: 30rpx;
						font-size: 20rpx;
						font-weight: 700;
						color: #fff;
						margin-right: 10rpx;
					}
				}
			}
		}

		.item-active {
			.item-c {
				.item-c-r {
					.item-c-r-l {
						.name {
							color: #989CA6;
						}
					}

					.item-c-r-btn {
						background: linear-gradient(131deg, #F3F0D7 0%, #FF6D4D 72%);
					}
				}
			}

		}
	}
</style>